<template>
  <div class="e_body">
    <img
      v-for="(item, index) in list"
      :key="index"
      :src="item.status == 1 ? treePath : treeOverPath"
      alt=""
      :style="{ left: item.x + 'px', top: item.y + 'px' }"
      @click="imgClick(item)"
    />
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      treePath: require("@/assets/image/tree.png"),
      treeOverPath: require("@/assets/image/tree_over.png"),
      list: [
        {
          x: 482,
          y: 326,
          name: "E-鸡瓜槭-002",
          status: 1,
        },
        {
          x: 490,
          y: 313,
          name: "E-油松-003",
          status: 1,
        },
        {
          x: 490,
          y: 326,
          name: "E-油松-004",
          status: 1,
        },
        {
          x: 499,
          y: 326,
          name: "E-油松-005",
          status: 1,
        },
        {
          x: 505,
          y: 313,
          name: "E-油松-006",
          status: 1,
        },
        {
          x: 505,
          y: 300,
          name: "E-旱柳-007",
          status: 1,
        },
        {
          x: 475,
          y: 313,
          name: "E-晚樱-008",
          status: 1,
        },
        {
          x: 478,
          y: 304,
          name: "E-晚樱-009",
          status: 1,
        },
        {
          x: 487,
          y: 304,
          name: "E-晚樱-010",
          status: 1,
        },
        {
          x: 497,
          y: 304,
          name: "E-悬铃木-011",
          status: 1,
        },

        {
          x: 501,
          y: 283,
          name: "E-悬铃木-013",
          status: 1,
        },
        {
          x: 493,
          y: 281,
          name: "E-晚樱-014",
          status: 1,
        },
        {
          x: 484,
          y: 281,
          name: "E-桧柏-015",
          status: 1,
        },
        {
          x: 501,
          y: 274,
          name: "E-桧柏-016",
          status: 1,
        },
        {
          x: 485,
          y: 271,
          name: "E-桧柏-017",
          status: 1,
        },
        {
          x: 485,
          y: 262,
          name: "E-桧柏-018",
          status: 1,
        },
        {
          x: 501,
          y: 265,
          name: "E-桧柏-019",
          status: 1,
        },
        {
          x: 496,
          y: 226,
          name: "E-国槐-020",
          status: 1,
        },
        {
          x: 518,
          y: 226,
          name: "E-国槐-021",
          status: 1,
        },
        {
          x: 503,
          y: 241,
          name: "E-桧柏-022",
          status: 1,
        },
        {
          x: 518,
          y: 251,
          name: "E-桧柏-023",
          status: 1,
        },
        {
          x: 542,
          y: 226,
          name: "E-国槐-026",
          status: 1,
        },
        {
          x: 531,
          y: 256,
          name: "E-悬铃木-027",
          status: 1,
        },
        {
          x: 519,
          y: 272,
          name: "E-晚樱-028",
          status: 1,
        },
        {
          x: 522,
          y: 284,
          name: "E-白皮枫-030",
          status: 1,
        },
        {
          x: 544,
          y: 276,
          name: "E-白皮枫-031",
          status: 1,
        },
        {
          x: 556,
          y: 279,
          name: "E-旱柳-032",
          status: 1,
        },
        {
          x: 552,
          y: 226,
          name: "E-国槐-034",
          status: 1,
        },
        {
          x: 561,
          y: 226,
          name: "E-国槐-035",
          status: 1,
        },
        {
          x: 560,
          y: 246,
          name: "E-悬铃木-036",
          status: 1,
        },
        {
          x: 555,
          y: 256,
          name: "E-悬铃木-033",
          status: 1,
        },
        {
          x: 567,
          y: 256,
          name: "E-悬铃木-037",
          status: 1,
        },
        {
          x: 565,
          y: 270,
          name: "E-白皮枫-038",
          status: 1,
        },
        {
          x: 576,
          y: 281,
          name: "E-悬铃木-039",
          status: 1,
        },
        {
          x: 588,
          y: 282,
          name: "E-国槐-040",
          status: 1,
        },
        {
          x: 590,
          y: 257,
          name: "E-悬铃木-041",
          status: 1,
        },
        {
          x: 582,
          y: 250,
          name: "E-悬铃木-042",
          status: 1,
        },
        // {
        //   x: 590,
        //   y: 245,
        //   name: "E-油松-043",
        //   status: 1,
        // },
        {
          x: 569,
          y: 226,
          name: "E-国槐-045",
          status: 1,
        },
        {
          x: 579,
          y: 226,
          name: "E-国槐-046",
          status: 1,
        },
        {
          x: 639,
          y: 243,
          name: "E-国槐-047",
          status: 1,
        },
        {
          x: 649,
          y: 224,
          name: "E-国槐-050",
          status: 1,
        },
        {
          x: 659,
          y: 224,
          name: "E-国槐-051",
          status: 1,
        },
        {
          x: 674,
          y: 224,
          name: "E-国槐-052",
          status: 1,
        },
        {
          x: 684,
          y: 253,
          name: "E-雪松-054",
          status: 1,
        },
        {
          x: 684,
          y: 224,
          name: "E-国槐-055",
          status: 1,
        },
        {
          x: 698,
          y: 224,
          name: "E-国槐-057",
          status: 1,
        },
        {
          x: 721,
          y: 226,
          name: "E-国槐-058",
          status: 1,
        },
        {
          x: 729,
          y: 245,
          name: "E-国槐-059",
          status: 1,
        },
        {
          x: 737,
          y: 258,
          name: "E-国槐-060",
          status: 1,
        },
        {
          x: 725,
          y: 258,
          name: "E-白皮枫-061",
          status: 1,
        },
      ],
    };
  },
  props: ["documentHeight", "listData"],
  computed: {},
  watch: {
    listData: {
      handler(newV) {
        newV.map((x) => {
          this.list.map((j, i) => {
            if (x.name == j.name) {
              j = { ...j, ...x };
              this.$set(this.list, i, j);
            }
          });
        });
      },
      deep: true,
    },
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const ratio = (this.documentHeight * 4) / 812;
      const xOffset = 60;
      const yOffset = 40;
      this.list.map((item) => {
        item.x = item.x * ratio + xOffset * ratio;
        item.y = item.y * ratio + yOffset * ratio;
      });
    },
    imgClick(item) {
      this.poi = item;
      this.$emit("imgClick", item);
    },
  },
};
</script>

<style lang="scss" scoped>
.e_body {
  img {
    position: absolute;
    top: 70px;
    width: 20px;
    height: 20px;
  }
}
</style>
